<template>
  <section class="main-section">
    <div class="btn-wrapper">
      <a-button class="btn-type" type="danger" @click="sha256()">SHA-256编码</a-button>
      <a-button class="btn-type" type="danger" @click="sha224()">SHA-224编码</a-button>
    </div>
    <div class="text-wrapper">
      编码数据:
      <a-input placeholder="数据" v-model:value="datum"/>
    </div>

    <div class="text-wrapper">
      盐 (可输入多个使用逗号分隔):
      <a-input placeholder="盐" v-model:value="salt"/>
    </div>

    <div class="text-wrapper">
      编码结果:
      <a-textarea placeholder="编码结果" :rows="6" :value="result" allowClear/>
    </div>
  </section>
</template>

<script>
import {encode256,encode224} from "../../api/sha256"

export default {
  name: "SHA256",
  data() {
    return {
      datum: '',
      result: '',
      salt: ''
    }
  },
  methods: {
    sha256() {
      let datum = this.datum
      let salt = this.salt

      if (datum.length === 0) {
        this.$message.error("编码的数据不能为空")
        return
      }

      let saltArray
      if (salt.length !== 0) {
        saltArray = salt.split('\\,')
      }

      let d = {
        "data": datum,
        "salt": saltArray
      }

      encode256(d).then(res => {
        console.log(res.data)
        this.result = res.data
        this.$message.success(`SHA256编码成功, 结果为: ${this.result}`)
      }).catch(err => {
        console.error(err)
        this.$message.error(`SHA256编码失败, 原因: ${err}`)
      })
    },
    sha224() {
      let datum = this.datum
      let salt = this.salt

      if (datum.length === 0) {
        this.$message.error("编码的数据不能为空")
        return
      }

      let saltArray
      if (salt.length !== 0) {
        saltArray = salt.split('\\,')
      }

      let d = {
        "data": datum,
        "salt": saltArray
      }

      encode224(d).then(res => {
        console.log(res.data)
        this.result = res.data
        this.$message.success(`SHA224编码成功, 结果为: ${this.result}`)
      }).catch(err => {
        console.error(err)
        this.$message.error(`SHA224编码失败, 原因: ${err}`)
      })
    }
  }
}
</script>

<style scoped>
.btn-wrapper {
  margin: 30px;
}

.btn-type {
  margin: 20px;
  line-height: 24px;
  font-size: 20px;
}

.main-section {
  margin-top: 30px;
}

.text-wrapper {
  margin: 30px auto;
  padding: 5px;
}
</style>
